<template>
    <div class="cart-box">
        <van-nav-bar title="购物车" fixed left-text="返回" left-arrow
                     @click-left="goBack">
            <template #right>
                <van-icon name="fire-o" color="#ee0a24" size="20"/>
            </template>
        </van-nav-bar>
        <div class="cart-body">
            <van-checkbox-group @change="groupChange" v-model="result" ref="checkboxGroup">
                <van-swipe-cell :right-width="50" v-for="(item, index) in list" :key="index" >
                    <div class="good-item">
                        <van-checkbox :name="item.id"/>
                        <div class="good-img" @click="toDetail(item)"><img v-lazy="prefix(item.productPic)" alt=""></div>
                        <div class="good-desc">
                            <div class="good-title" @click="toDetail(item)">
                                <span>{{ item.productName }}</span>
                                <span>x{{ item.quantity }}</span>
                            </div>
                            <div class="good-btn">
                                <div class="price">¥{{ item.price }}</div>
                                <van-stepper
                                        integer
                                        :min="1"
                                        :value="item.quantity"
                                        :name="item.id"
                                        async-change
                                        :disable-input=true
                                        @change="onChange"

                                />
                            </div>
                        </div>
                    </div>
                    <van-button
                            style="float: right;margin-right: 30px"
                            square
                            plain
                            icon="delete"
                            type="warning"
                            class="delete-button"
                            @click="deleteGood(item.id)"
                    />
                </van-swipe-cell>
            </van-checkbox-group>
        </div>
        <van-submit-bar
                v-if="list.length > 0"
                class="submit-all"
                :price="total * 100"
                button-text="结算"
                @submit="onSubmit"
        >
            <van-checkbox @click="allCheck" v-model="checkAll">全选</van-checkbox>
        </van-submit-bar>
        <div class="empty" v-if="!list.length">
            <van-icon name="smile-o"/>
            <div class="title">购物车空空空如也</div>
            <van-button color="#1baeae" type="primary" @click="goTo" block>前往首页</van-button>
        </div>
        <nav-bar></nav-bar>
    </div>
</template>

<script>
    import {Toast} from 'vant'
    import navBar from '../../components/NavBar'
    import sHeader from '../../components/SimpleHeader'
    import {getCart, deleteCartItem, modifyCart} from '../../api/cart'
    import {generateOrder} from "../../api/order";

    export default {
        name: "cartIndex",
        data() {
            return {
                checked: false,
                list: [],
                all: false,
                result: [],
                checkAll: false
            }
        },
        components: {
            navBar,
            sHeader
        },
        mounted() {
            this.init()
        },
        computed: {
            total: function () {
                let sum = 0
                let _list = this.list.filter(item => this.result.includes(item.id))
                _list.forEach(item => {
                    sum += item.price * item.quantity
                })
                return sum
            }
        },
        methods: {
            async init() {
                this.list = [];
                this.result = [];
                this.checkAll = false;
                Toast.loading({message: '加载中...', forbidClick: true});
                getCart().then(res => {
                    this.list = res.data
                    this.result = res.data.map(item => item.id)
                })
                Toast.clear()
            },
            goBack() {
                this.$router.go(-1)
            },
            goTo() {
                this.$router.push({path: 'home'})
            },
            async onChange(value, detail) {
                modifyCart(detail.name, value).then(res => {
                    this.list.forEach(item => {
                        if (item.id === detail.name) {
                            item.quantity = value
                        }
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            async onSubmit() {
                if (this.result.length == 0) {
                    Toast.fail('请选择商品进行结算')
                    return
                }
                const params = JSON.stringify(this.result)
                generateOrder(this.result).then(res => {
                    this.$router.push({path: `create-order?cartItemIds=${params}`})
                })
            },
            async deleteGood(id) {
                var ids = [];
                ids.push(id)
                let params = new URLSearchParams();
                params.append("ids", ids)
                deleteCartItem(params).then(res => {
                    if (res.data === 1){
                        Toast.success('删除成功')
                        setTimeout(() => {
                            this.init();
                            this.$store.dispatch('GetInfo');
                        }, 1500)
                    }
                })
            },
            groupChange(result) {
                if (result.length === this.list.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
                this.result = result
            },
            allCheck(value) {
                if (this.checkAll){
                    this.result = this.list.map(item => item.id);
                }else {
                    this.result = [];
                }
            },
            toDetail(item){
                this.$router.push({path: `product/${item.productId}`})
            }
        }
    }
</script>


<style lang="less">
    @import '../../common/style/mixin';

    .cart-box {
        .cart-header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            .fj();
            .wh(100%, 44px);
            line-height: 44px;
            padding: 0 10px;
            .boxSizing();
            color: #252525;
            background: #fff;
            border-bottom: 1px solid #dcdcdc;

            .cart-name {
                font-size: 14px;
            }
        }

        .cart-body {
            margin: 60px 0 100px 0;
            padding-left: 10px;

            .good-item {
                display: flex;

                .good-img {
                    img {
                        .wh(100px, 100px)
                    }
                }

                .good-desc {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    padding: 20px;

                    .good-title {
                        display: flex;
                        justify-content: space-between;
                    }

                    .good-btn {
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-size: 16px;
                            color: red;
                            line-height: 28px;
                        }

                        .van-icon-delete {
                            font-size: 20px;
                            margin-top: 4px;
                        }
                    }
                }
            }

            .delete-button {
                width: 50px;
                height: 100%;
            }
        }

        .empty {
            width: 50%;
            margin: 0 auto;
            text-align: center;
            margin-top: 200px;

            .van-icon-smile-o {
                font-size: 50px;
            }

            .title {
                font-size: 16px;
                margin-bottom: 20px;
            }
        }

        .submit-all {
            margin-bottom: 50px;

            .van-checkbox {
                margin-left: 10px
            }

            .van-submit-bar__text {
                margin-right: 10px
            }

            .van-submit-bar__button {
                background: @primary;
            }
        }

        .van-checkbox__icon--checked .van-icon {
            background-color: @primary;
            border-color: @primary;
        }
    }
</style>
